<script setup>
import FilterBar from '@/components/FilterBar.vue'
import * as echarts from 'echarts'
import { onMounted, inject, reactive } from 'vue'

const $http = inject('$http')

const dataObj = reactive({
  selectValue: 'day',
})

function getChartData() {
  $http.get('/screen/place/type/scan', { params: { scope: dataObj?.selectValue } }).then(res => {
    const { data = [] } = res || {}

    const yData = data.map(item => {
      return {
        value: item.value,
        name: item.label,
      }
    })

    option = {
      grid: {
        top: '24',
        bottom: '24',
        left: '16',
        right: '16',
        containLabel: true,
      },
      tooltip: {
        trigger: 'item',
        axisPointer: {
          type: 'shadow',
        },
        backgroundColor: 'rgba(0,0,0,0.5)',
        borderColor: 'rgba(0,0,0,0)',
        textStyle: {
          color: '#ffffff',
        },
      },
      legend: {
        top: 'center',
        orient: 'vertical',
        right: '0',
        width: 54,
        textStyle: {
          //图例字体大小
          color: '#fff',
          fontSize: 10,
          width: 40,
          height: 'auto',
        },
        //图例大小
        itemHeight: 12,
        itemWidth: 12,
        //图例滚动显示
        type: 'scroll',
        //图例纵向显示
        formatter: function (name) {
          return echarts.format.truncateText(name, 50, '10px', '…')
        },
      },
      series: [
        {
          name: '',
          type: 'pie',
          roseType: 'area',
          radius: ['5%', '30%'],
          center: ['35%', '50%'],
          avoidLabelOverlap: false,
          minAngle: 10,
          label: {
            show: true,
            // position: 'center',
            formatter: function (e) {
              return e.percent + '%'
            },
            color: '#ffffff',
          },
          labelLine: {
            show: true,
          },
          data: yData,
        },
      ],
    }

    if (option && typeof option === 'object') {
      myChart.setOption(option)
    }

    window.addEventListener('resize', myChart.resize)
  })
}

var dom
var myChart
var option
function openWindow() {
  window.open('http://36.99.193.53:90/admin/#/yq/PlaceScanRec')
}
onMounted(() => {
  dom = document.getElementById('pieChart')
  myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false,
  })

  getChartData()
})

function change(item = {}) {
  dataObj.selectValue = item?.value || ''

  getChartData()
}
</script>

<template>
  <div class="placeBox">
    <div class="title">辖区重要场所出入频率分析</div>

    <FilterBar class="filterBox" :selectValue="dataObj.selectValue" @change="change" />

    <div style="height: 100%" id="pieChart" class="charts"></div>
  </div>
</template>

<stule lang="less" scoped>
.placeBox {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/home/boxbg2.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

  .title {
    margin-top: 8px;
    width: 100%;
    height: 24px;
    font-size: 14px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .filterBox {
    margin: 13px 16px 14px 16px;
  }

  .charts {
    flex: 1;
  }
}
</stule>
